<template>
  <div class="pretty-tooltips-page">
    <h2>好看的Tooltips</h2>
    <p>这里将展示各种美观、实用的提示气泡（Tooltip）样式和交互。</p>
    <div class="input-grid">
      <t-card class="input-card">
        <div class="card-content-center">
          <GradientInfoTooltip />
        </div>
      </t-card>
      <t-card class="input-card">
        <div class="card-content-center">
          <ProfileLinkedinTooltip />
        </div>
      </t-card>
      <t-card class="input-card">
        <div class="card-content-center">
          <ProjectStructureTooltip />
        </div>
      </t-card>
      <t-card class="input-card">
        <div class="card-content-center">
          <SocialMediaTooltip />
        </div>
      </t-card>
      <!-- 预留更多Tooltip样式 -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { Card as TCard } from 'tdesign-vue-next';
import GradientInfoTooltip from '@/components/pretty-tooltips/GradientInfoTooltip.vue';
import ProfileLinkedinTooltip from '@/components/pretty-tooltips/ProfileLinkedinTooltip.vue';
import ProjectStructureTooltip from '@/components/pretty-tooltips/ProjectStructureTooltip.vue';
import SocialMediaTooltip from '@/components/pretty-tooltips/SocialMediaTooltip.vue';
</script>

<style scoped>
.pretty-tooltips-page {
  padding: 32px;
}
h2 {
  font-size: 24px;
  margin-bottom: 16px;
}
p {
  color: #888;
}
.input-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  margin-top: 32px;
}
.input-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  /* box-shadow: 0 4px 24px 0 rgba(0,0,0,0.08), 0 1.5px 4px 0 rgba(0,0,0,0.04); */
  padding: 32px 16px 24px 16px;
  transition: box-shadow 0.2s;
  border: 1px solid #f2f3f5;
}
</style> 